import Image from 'next/image'
import { getTranslations } from 'next-intl/server'
import { fetcher } from '@/src/utils/fetcher'
import { cookies } from 'next/headers'
import Map from './components/map'

const Page: React.FC = async () => {
  const cookieStore = cookies()
  const [t, config] = await Promise.all([
    getTranslations('contact'),
    fetcher<GeneralConfig>('/api/index/indexConfig', {
      cookieStore,
    }),
  ])
  return (
    <>
      <div className='flex flex-col lg:flex-row lg:justify-between'>
        {/* 左侧信息 */}
        <div className='lg:w-[28.1875rem] lg:h-[16.4375rem] lg:flex lg:flex-col lg:justify-between 2xl:h-[24.6875rem]'>
          {/* 公司名称 */}
          <div className='uppercase text-[0.75rem] leading-[1.0625rem] text-[#91B01C] font-bold max-w-[14.375rem] lg:max-w-[16.5625rem] 2xl:max-w-[24.8125rem] 2xl:text-[1.25rem] 2xl:leading-[1.8rem]'>
            {config.name}
          </div>
          <div className='h-4 lg:h-[2.1875rem] 2xl:h-[3.1875rem]' />
          {/* 信息列表 */}
          <div>
            <div className='flex items-baseline text-[0.875rem] leading-[1.375rem] font-medium 2xl:text-[1.125rem] 2xl:leading-[2rem]'>
              <div className='text-[#999999] mr-2 flex-shrink-0'>{`${t(
                'addLabel'
              )}:`}</div>
              <div className='text-[#333333]'>{config.address}</div>
            </div>
            <div className='flex items-baseline text-[0.875rem] leading-[1.375rem] font-medium 2xl:text-[1.125rem] 2xl:leading-[2rem]'>
              <div className='text-[#999999] mr-2 flex-shrink-0'>{`${t(
                'telLabel'
              )}:`}</div>
              <div className='text-[#333333]'>{config.tel}</div>
            </div>
            <div className='flex items-baseline text-[0.875rem] leading-[1.375rem] font-medium 2xl:text-[1.125rem] 2xl:leading-[2rem]'>
              <div className='text-[#999999] mr-2 flex-shrink-0'>{`${t(
                'emailLabel'
              )}:`}</div>
              <div className='text-[#333333] whitespace-wrap'>
                {config.email.split(',').map((str) => {
                  return <div key={str}>{str}</div>
                })}
              </div>
            </div>
          </div>
          <div className='h-6 2xl:h-12' />
          {/* 二维码 */}
          <div className='flex items-center justify-between w-full px-[0.9375rem] lg:px-0 lg:w-[11.375rem] 2xl:w-[17rem]'>
            <div className='flex flex-col items-center'>
              {/* 二维码图片 */}
              <div className='relative w-[37vw] h-[37vw] bg-gray-100 lg:w-[4.6875rem] lg:h-[4.6875rem] 2xl:w-[7rem] 2xl:h-[7rem]'>
                <Image
                  src={config.ewm.split(',')![0]}
                  alt='qrcode'
                  fill
                  sizes='(max-width: 1024px) 37vw, (max-width: 1536px) 8vw, 8vw'
                />
              </div>
              <div className='h-6 lg:h-1 2xl:h-3' />
              <div className='text-[#333333] text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[1.5625rem] 2xl:text-[1.125rem] 2xl:leading-[1.4rem]'>
                {t('scanQRCode')}
              </div>
              {/* 二维码名称 */}
            </div>
            <div className='flex flex-col items-center'>
              {/* 二维码图片 */}
              <div className='relative w-[37vw] h-[37vw] bg-gray-100 lg:w-[4.6875rem] lg:h-[4.6875rem] 2xl:w-[7rem] 2xl:h-[7rem]'>
                <Image
                  src={config.ewm.split(',')![1]}
                  alt='qrcode'
                  fill
                  sizes='(max-width: 1024px) 37vw, (max-width: 1536px) 8vw, 8vw'
                />
              </div>
              <div className='h-6 lg:h-1 2xl:h-3' />
              <div className='text-[#333333] text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[1.5625rem] 2xl:text-[1.125rem] 2xl:leading-[1.4rem]'>
                {t('scanQRCode')}
              </div>
              {/* 二维码名称 */}
            </div>
          </div>
        </div>
        <div className='h-[1.78125rem] lg:w-6' />
        {/* 右侧地图 */}
        <Map />
      </div>
      <div className='h-[2.59375rem] lg:h-[6.125rem] 2xl:h-[9.1875rem]' />
    </>
  )
}

export default Page
